<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="转盘抽奖">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>转盘抽奖</title>
   
    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/layer/3.0.1/mobile/need/layer.css?2.0"> -->
    <link rel="stylesheet" type="text/css" href="../css/base.css?v=201711141721">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.0.1/mobile/layer.min.js"></script>
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
    <script src="./../js/common.js?v=20170814001"></script>
    <script src="./../js/conf.js?v=20170801001"></script>
	<style>
		html,body{background: #f6952d;}
	</style>
    <script>
	$(function(){
		FastClick.attach(document.body);
		
		var params = _CZWeb.getUrlParams();
		var brandid = params["brandid"];
		var brandName = (brandid=="feiin"?"wifi":(brandid||"kc")).toUpperCase();
		$(".brand-name").html(brandName);

		var formatErrorMsg = function(str){
			return str.replace(/{{brand-name}}/g,brandName);
		};

		/*var dialog = function(status,str,btn){
			var dialog = $('<div class="dialog dialog'+status+'"></div>')
			.append('<div class="dialog-close close"></div>')
			.append('<div class="dialog-top"></div>')
			.append('<div class="dialog-img"></div>')
			.append('<div class="dialog-text">'+(str?str:(formatErrorMsg(_errorMsg[status])||"发生了系统错误!"))+'</div>')
			.append('<div class="dialog-btn close">'+(btn||'关闭')+'</div>');
			layer.dialog(dialog.prop("outerHTML"));
		};*/

		//弹窗
		var dialog = function(status,str,btn,title,img){
			var dialog = $('<div class="dialog dialog'+status+'"></div>')
			.append('<div class="dialog-close close"></div>')
			.append('<div class="dialog-top">'+(title||'')+'</div>')
			.append(img===false?'':('<div class="dialog-img"'+ (img?('style="background-image:url('+img+')"'):'') +'></div>'))
			.append('<div class="dialog-text">'+(str===false?'':(str?str:(formatErrorMsg(_errorMsg[status])||"发生了系统错误!")))+'</div>');
			var btnBox = $('<div class="button-box flex flex-y-center flex-x-center"></div>');
			if(btn instanceof Array){// [{"text":"asdf","fn":function(){}}]
				$.each(btn, function(index, val) {
					if(typeof val === 'object'){
						var btnid = new Date().getTime() +''+ parseInt(Math.random()*100);
						var b = $('<div class="dialog-btn close '+(val.simple?'simple':'')+'" id="'+btnid+'">'+val.text+'</div>');
						if (typeof this.fn === 'function') {
							$('body').on('click','#'+btnid,function(){
								console.log(val.text);
								val.fn();
							});
						}
						btnBox.append(b.prop("outerHTML"));
					}else{
						btnBox.append('<div class="dialog-btn close">'+(val||'关闭')+'</div>');
					}
				});
			}else{
				if(btn!==false)
					btnBox.append('<div class="dialog-btn close">'+(btn||'关闭')+'</div>');
			}
			dialog.append(btnBox);
			layer.dialog(dialog.prop("outerHTML"));
		};


		//客户端调用右上角事件
		/*window.my_info = function(){
			location.href = _CZWeb.getAdspaceUrl(brandid,_host+'/info.html','我的奖品',false);
		};
		*/



		var user_jf = 0,wheel_integral = 0,now_rotate = 0,lottery_goods_list = [];
		$(".dial-go").on("click",function(){
			_CZWeb.Statistics({pos_tap:"积分乐园-积分转盘抽奖-点击[立即抽奖]按钮"});
			var $this = $(this);
			if($this.hasClass('running')){
				return;
			}
			if(user_jf<wheel_integral){
				dialog("1","","好的");
				return;
			}
			$.ajax({url: _lotteryPageSubmitAction,type: 'POST',dataType: 'json',data: params,beforeSend:function(){
				$this.addClass('running');
			}})
			.done(function(data) {
				if(data){
					if(data.result==0){
						showView(data.user_amount);
						//转盘旋转
						rotate(data.lottery_goods.id);
					}else{
						dialog(data.result);
						$this.removeClass('running');
					}
				}
			})
			.fail(function() {
				dialog("9999");
				$this.removeClass('running');
			});
		});

		var rotate = function(goodsid){
			$.each(lottery_goods_list, function(index, val) {
				var g = this;
				console.log(g.id,goodsid);
				if(g.id == goodsid){
					//计算角度
					var unit_rotate = 360/lottery_goods_list.length;//单个奖品所占角度
					var stop_rotate = Math.abs(unit_rotate-10);//落点角度范围 所占角度-10
					var random_rotate = Math.random()*stop_rotate-stop_rotate/2;//随机偏移量
					var rotate = (360 - (index * unit_rotate)) + 3600*(++now_rotate) + random_rotate;
					$('.dial-in').css('transform','rotate('+rotate+'deg)');
					setTimeout(function(){
						if(g.gtype == -1){ //谢谢参与
							dialog("","啊哦~姿势不对，再来一次吧","再转一次");
						}else{
							dialog("bingo",'恭喜您抽中了'+g.goodsname+'，快去查看奖品吧!',"立即查看");
						}
						$('.dial-go').removeClass('running');

					},5200);
					return false;
				}
			});
		};
		$('body').on('click','.botton-mygoods,.dialogbingo .dialog-btn',function(){
			_CZWeb.Statistics({pos_tap:"积分乐园-积分转盘抽奖-点击[我的奖品]按钮"});
			location.href = _CZWeb.getAdspaceUrl(brandid,_host+'html/bag_list.html','我的奖品',false);
		}).on('click','.botton-rule',function(){
			_CZWeb.Statistics({pos_tap:"积分乐园-积分转盘抽奖-点击[转盘规则]按钮"});
			var dialog = $('<div class="lottery-rule-dialog"></div>')
			.append('<div class="close"></div>')
			.append('<div class="dialog-top"><i></i><i></i>转盘规则</div>');
			var cont = $('<div class="dialog-cont"></div>').appendTo(dialog);
			cont.append('<p class="title">奖品发放规则：</p>');
			cont.append('<p class="mini-title">实物奖品发放</p>');
			cont.append('<p>成功使用后，客服会联系你，并在三个工作日内寄出奖品</p>');
			cont.append('<p class="mini-title">话费奖品发放</p>');
			cont.append('<p>成功使用后，话费自动到账当前登录账号</p>');
			cont.append('<p class="mini-title">流量奖品发放</p>');
			cont.append('<p>流量为全国流量，成功使用后，流量会到账至当前登录的手机号上，月底最后两天由于运营商维护无法使用</p>');
            cont.append('<p class="title">客服说明：</p>');
			cont.append('<p>活动中有任何疑问，请致电：</p>');
	        var info = _kefu[params['brandid']];
	        if(info){
		        if(info.phone){
					cont.append('<div>客服电话：'+info.phone+'（服务时间10:00~19:00）</div>');
		        }
		        if(info.qq){
					cont.append('<div>客服QQ：'+info.qq+'（服务时间10:00~19:00）</div>');
		        }
		        if(info.weixin){
					cont.append('<div>微信公众号：'+info.weixin+'</div>');
		        }
	        }
	        cont.append('<div class="footer">本活动最终解释权归上海友话网络科技有限公司所有</div>')
			layer.dialog(dialog.prop("outerHTML"));
		});

		var showView = function(jifen,price){
			user_jf = jifen;
			if(price){
				wheel_integral = price;
			}
			$('.jifen').html(jifen||0);
			$('.wheel_integral').html(wheel_integral);
		};

		var init = function(){
			var loading_index = null;
			$.ajax({url: _lotteryPageInfoAction,type: 'POST',dataType: 'json',data: params,beforeSend:function(){
				loading_index = layer.loading();
			}})
			.done(function(data) {
				if(data&&data.result==0){
					//剩余积分 & 单次抽奖消耗
					showView(data.user_amount,data.wheel_integral);
					if (data.lottery_goods_list) {
						lottery_goods_list = data.lottery_goods_list;
						var l = lottery_goods_list.length,rotate = 360/l,$line = $('.dial-in-line'),$goodsview = $('.dial-in-list');
						for (var i = 0; i < l; i++) {
							var rotate_g = rotate*i ,rotate_li = rotate_g+30;
							$line.append('<li class="dial-in-litem" style="-webkit-transform: rotate('+rotate_li+'deg);transform: rotate('+rotate_li+'deg);"></li>');
							
							$goodsview.append('<div class="dial-in-item">'+
							        '<div class="dial-in-icontent" style="transform: rotate('+rotate_g+'deg);">'+
							            '<p class="dial-in-itext">'+lottery_goods_list[i].goodsname+'</p>'+
							            '<p class="dial-in-iicon" style="background-image:url('+lottery_goods_list[i].img+')"></p>'+
							        '</div>'+
							    '</div>');
						}
					}
					// initNotice($('.notice'));
				}else{
					layer.msg((data&&data.reason)||'系统错误!');
				}
			})
			.fail(function() {
				dialog("9999");
			}).always(function() {
				layer.close(loading_index);
			});
		};

		var initNotice = function(el){
        	if (el.html()=="") {
        		el.append('<ul><li></li><li></li></ul>');
        	}
        	var noticeList = [],noticeIndex = 0,nextNotice = null, noticeUl = el.find('ul');
            //拉取公告信息
            $.post(_noticeAction,$.extend({},params,{module:"wheel"}),function(data){
                if(data&&data.result==0){
                    //公告显示
                    if(data.broadcast_list){
                        noticeList = data.broadcast_list;
                        if(noticeList.length>0){
                            el.addClass('runing').find('li').eq(1).html(noticeList[0]);
                        }
                    }
                }else{
                    layer.msg((data&&data.reason)||'系统错误!');
                }
            },'json');

            //监控动画结束
            $(document).on('animationEnd webkitAnimationEnd',function(e){
                var $target = $(e.target);
                if(e.originalEvent.animationName == "notice-animation" && $target.parent().hasClass('notice')){
                    if(noticeList.length==0){
                        el.removeClass('runing');
                        return;
                    }
                    var lis = noticeUl.find('li');
                    lis.eq(0).html(noticeList[noticeIndex++]); 
                    if(noticeIndex>=noticeList.length){
                        noticeIndex=0;
                    }
                    if(nextNotice!=null){
                        noticeList[noticeIndex] = nextNotice;
                        nextNotice = null;
                    }
                    lis.eq(1).html(noticeList[noticeIndex]); 
                    el.removeClass('runing');
                    setTimeout(function(){
                        el.addClass('runing');
                    },1500);
                }
            });
        };


		init();
        initNotice($('.notice'));
	});
	</script>
</head>
<body>
	<div class="page page-lottery">
		<div class="notice"></div>
		<div class="title"></div>
		<div class="dial">
			<div class="dial-in">
				<ul class="dial-in-line"></ul>
				<div class="dial-in-list"></div>
			</div>
			<div class="dot-box">
				<div class="dot transformRotate0"><i></i><i></i></div>
				<div class="dot transformRotate15"><i></i><i></i></div>
				<div class="dot transformRotate30"><i></i><i></i></div>
				<div class="dot transformRotate45"><i></i><i></i></div>
				<div class="dot transformRotate60"><i></i><i></i></div>
				<div class="dot transformRotate75"><i></i><i></i></div>
				<div class="dot transformRotate90"><i></i><i></i></div>
				<div class="dot transformRotate105"><i></i><i></i></div>
				<div class="dot transformRotate120"><i></i><i></i></div>
				<div class="dot transformRotate135"><i></i><i></i></div>
				<div class="dot transformRotate150"><i></i><i></i></div>
				<div class="dot transformRotate165"><i></i><i></i></div>
			</div>
			<div class="dial-go "></div>
		</div>
		<div class="lottery-bottom">
			<!--当前剩余<span class="jifen"></span>积分(<span class="wheel_integral"></span>积分/次)-->
		</div>
		<div class="botton botton-rule">转盘规则</div>
		<div class="botton botton-mygoods">我的奖品</div>
	</div>
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?9b40deeaa9ce094daadf13e0dc1a4729";
	  var s = document.getElementsByTagName("script")[0];
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
</body>
</html>
